<template>
  <div>
      <!-- <van-loading size="24px" vertical class="jijiaaiaai" v-if="seekhtiytos=='' ">加载中...</van-loading> -->
      <div class="seektopu">
          <div class="boptoo">
              <div class="potuhave">
                  <div class="gotoseek">
                      <div class="ty">
                          <span class="iconfont icon-xiangzuo" @click="$router.go('-1')"></span>
                      </div>
                      <div class="ty from">
                          <van-search
                            v-model="value"
                            show-action
                            placeholder="最新菜谱"
                            @search="onSearch"
                            @clear="onclearto"
                            >
                                <template #action>
                                    <div @click="onSearch">搜索</div>
                                </template>
                            </van-search>
                      </div>
                  </div>
              </div>
              <div class="ltopu">
                   <div class="historymaox">
                       <div class="hist" v-if="seeektosspu==false">
                           <div class="headline" v-if="seekhtiytos !='' ">
                               <div class="se tr">
                                   <span>
                                       历史搜索
                                   </span>
                               </div>
                               <div class="se rto">
                                   <span class="iconfont icon-shanchu" @click="del"></span>
                               </div>
                           </div>
                           <div class="hist-listss">
                               <span class="tp" v-for="(item,index) in seekhtiytos" :key="index" @click="gethityto(index)">{{item.name}}</span>
                           </div>
                            <div class="headline hop" v-if="seekhoptos !='' "> 
                               <div class="se tr">
                                   <span>
                                       热门搜索
                                   </span>
                               </div>
                               <div class="se rto">
                                   <!-- <span class="iconfont icon-shanchu"></span> -->
                               </div>
                           </div>
                           <div class="hop-listss">
                               <span class="tp" v-for="(item,index) in seekhoptos" :key="index" v-show="index<10" @click="gethopto(index)">{{item.name}}</span>
                               <!-- <span class="tp">粤菜</span>
                               <span class="tp">糖醋里脊</span>
                                <span class="tp">粤菜</span>
                               <span class="tp">糖醋里脊</span>
                                <span class="tp">粤菜</span>
                               <span class="tp">糖醋里脊</span>
                                <span class="tp">粤菜</span>
                               <span class="tp">糖醋里脊</span> -->
                           </div>    
                           <div class="relisstos">
                               <div class="itemto">
                                   <div class="headline hop" v-if="recommendseeklis !=''">
                                        <div class="se tr">
                                            <span>
                                                推荐搜索
                                            </span>
                                        </div>
                                        <div class="se rto">
                                            <!-- <span class="iconfont icon-shanchu"></span> -->
                                        </div>
                                    </div>
                                   <div class="items" v-for="(item) in recommendseeklis" :key="item.id">
                                       <div class="img">
                                           <img :src="item.img" alt="">
                                       </div>
                                       <div class="right">
                                            <div class="tile">
                                                <h2 class="recipe-name text-clamp">{{item.n}}</h2> 
                                                <div class="recipe-cai text-lips">{{item.cookstory}}</div>     
                                            </div>
                                            <div class="recipe-auth">{{item.an}}</div>
                                            <div class="recipe-other">
                                                <span class="iconfont icon-yanjing"></span>
                                                <span>{{item.ph}}</span>
                                                <span class="iconfont icon-shoucang1"></span>
                                                <span>{{item.pw}}</span>
                                            </div>
                                       </div>
                                   </div>
                               </div>
                           </div>
                       </div>
                       <div class="seektosgoto" v-if="seeektosspu==true">
                           <div class="relisstos">
                               <div class="itemto" v-if="seeklisttolis">
                                   <div class="headline hop">
                                        <div class="se tr">
                                            <span>
                                                最佳匹配
                                            </span>
                                        </div>
                                        <div class="se rto">
                                            <!-- <span class="iconfont icon-shanchu"></span> -->
                                        </div>
                                    </div>
                                   <div class="items" v-for="(item) in seeklisttolis" :key="item.id" >
                                       <div class="img" @click="gottodetail(item.id)">
                                           <img :src="item.img" alt="">
                                       </div>
                                       <div class="right">
                                            <div class="tile">
                                                <h2 class="recipe-name text-clamp">{{item.n}}</h2> 
                                                <div class="recipe-cai text-lips">{{item.cookstory}}</div>     
                                            </div>
                                            <div class="recipe-auth">{{item.an}}</div>
                                            <div class="recipe-other">
                                                <span class="iconfont icon-yanjing"></span>
                                                <span>{{item.ph}}</span>
                                                <span class="iconfont icon-shoucang1"></span>
                                                <span>{{item.pw}}</span>
                                            </div>
                                       </div>
                                   </div>
                               </div>
                           </div>
                       </div>
                   </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Search } from 'vant';
// import { Toast } from 'vant';
import {getseek,getseekhopto} from '../../api/seek'
Vue.use(Search);

export default {
    data() {
        return {
            value:'',
            seeektosspu:false,
            seeklisttodata:null,//搜索菜谱
            seeklisttolis:[],//搜索菜谱
            seekhoptos:[],//热门搜索
            seekhtiytos:[
                {
                    name:"心年蛋糕",
                },
                 {
                    name:"粤菜",
                },
                 {
                    name:"糖醋里脊",
                },
            ],//搜索历史//
            recommendseeklis:[
                {
                    n:"手撕包菜",
                    img:"https://cp1.douguo.com/upload/caiku/1/4/3/260x220_14e009a663a982096902f7085985d073.jpeg",
                    cookstory:"包菜 油 盐 干辣椒 大蒜头 醋 生抽 蚝油 白糖",
                    an:"jmy的私房菜",
                    ph:"30125334",
                    pw:"114371",
                    id:1

                },
                {
                    an: "紫色透明",
                    cookstory: " 为牛年量身定做了一道热乎乎的过年菜，炖一锅红烩牛肉，牛年开运，大吉大利。  祝大家牛年牛气冲天，牛运亨通。",
                    id: 3060882,
                    img: "https://cp1.douguo.com/upload/caiku/3/4/9/600_34139e882835863762423120e28e66b9.jpeg",
                    n: " 红烩牛肉 牛年开运菜",
                    ph: 721,
                    pw: 1080,
                },
                {
                    an: "WU大小姐",
                    cookstory: "大吉大利，吉祥如意。",
                    id: 2025518,
                    img: "https://cp1.douguo.com/upload/caiku/7/d/0/600_7dd27946036e19ce1329f277c18a09b0.jpeg",
                    n: "新年开运菜—鲍鱼鸡",
                    ph: 1440,
                    pw: 1920   
                },
                {
                    an: "美国厨娘",
                    cookstory: "金汤其实就是酸汤，配以肥牛卷爽口开胃，正好适合搭配过年的油腻食物。肥牛卷不用放在金汤里烫熟，那样会把血沫都留在汤里。汤就不亮了，金汤倒入肥牛卷很容易入味的。",
                    id: 1506703,
                    img: "https://cp1.douguo.com/upload/caiku/b/a/b/600_ba6dc9b6e0a1d48044b42835af7f0aab.jpeg",
                    n: "年夜饭金玉满堂-金汤肥牛卷",
                    ph: 534,
                    pw: 800,
                },
                {
                    an: "爱美食的拉拉",
                    cookstory: "嘴巴馋了，想吃珍妮曲奇饼干，网上看了价钱好贵好贵，那就自给自足，自己动手做起来吧",
                    id: 2360440,
                    img: "https://cp1.douguo.com/upload/caiku/3/5/e/600_35dba025beebb4213f700aa47e43d48e.jpg",
                    n: "珍妮曲奇",
                    ph: 533,
                    pw: 800,
                }
            ],//搜素推荐
        };
    },
    methods: {
        onSearch(){
            // Toast(val);
            if(this.value !=''){
                this.getseeektos();
                
            }
        },
        onclearto(){
            // console.log("取消")
            console.log(this.value);
            this.seeektosspu=false;
            this.seeklisttolis=[];
        },
        getseeektos(){
            getseek({
                keyword:this.value,
                order:2,
                type:0,
                offset:0,
                limit:10
                }).then(data=>{
                console.log("seek",data)
                this.seeklisttodata=data;
                this.getlistgo();
            })
            
        },
        getlistgo(){
             this.seeklisttodata.result.list.forEach(ele => {
                 if(ele.r){
                      let datatos = new Set([ele.r])
                      for (let e of datatos) {
                            let {id,a,n,ph,pw,cookstory,an,img} =e;
                            let data = {
                                id:id,
                                a:a,
                                n:n,
                                ph:ph,
                                pw:pw,
                                cookstory:cookstory,
                                an:an,
                                img:img
                            } 
                          console.log("活动",data)
                        this.seeklisttolis.push(data);
                      }
                      
                 }
             });
                    this.seeektosspu=true; //开起匹配
                    let datahity ={
                        name:this.value
                    }
                    this.seekhtiytos.push(datahity)


            
        },
        getsekhopss(){
            getseekhopto().then(data=>{
                // console.log("热门搜索",data);
                let seekhopdata=data;
                seekhopdata.result.suggests.forEach(ele=>{
                    // console.log(ele)
                    this.seekhoptos.push(ele)
                })
            })
        },
        del(){
            this.seekhtiytos=[];
        },
        gethopto(index){
            this.value = this.seekhoptos[index].name;
            this.onSearch()
        },
        gethityto(index){
            this.value = this.seekhtiytos[index].name;
            this.onSearch()
        },
        // gotodell(id){
        //     console.log(id)
        //     this.$router.push('/detail');
        // },
        //跳到菜谱详情
        gottodetail(id){
            let detail = id;//detail   // console.log(asdto)item_id: 3160559
            console.log(id);
            console.log("detail",detail)
            window.sessionStorage.setItem('detail',JSON.stringify(detail));//存数据
            // this.$router.push('/detail')
            this.$router.push({name:"detail",params:{data:detail }})
        },
        
  },
  watch:{
      value(){
          if(this.value !=''){
              console.log("123")
              this.seeektosspu=false;
              this.seeklisttolis=[];
          }
      }
  },
  created(){
    this.getsekhopss();
  }
}
</script>

<style lang="less">
    .seektopu{
        width: 100%;
        height: 100%;
        position: relative;
        background-color: #fff;
        z-index: 30;
        .boptoo{
            width: 100%;
            height: 100%;
            .potuhave{
                width: 100%;
                height: 45px;
                .gotoseek{
                    width: 100%;
                    height: 45px;
                    position: fixed;
                    top: 0;
                    left:0;
                    padding-left: 10px;
                    padding-right: 10px;
                    box-sizing: border-box;
                    display: flex;
                    z-index: 50;
                    background-color: #fff;
                    justify-content: center;
                    align-items: center;
                    .ty{
                        width: 8%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        span{
                            &.iconfont{
                                display: block;
                                width: 100%;
                                height: 100%;
                                text-align:left;
                                line-height: 50px;
                                font-size: 20px;
                                color: #323233;
                            }
                        }
                    }
                    .from{
                        width: 92%;
                        height: 100%;
                        .van-search {
                            width: 100%;
                            padding: 0;
                        }
                    }
                }
            }
            .ltopu{
                width: 100%;
                margin-top: 10px;
                padding-left: 10px;
                padding-right: 10px;
                box-sizing: border-box;
                .historymaox{
                    width: 100%;
                    .hist{
                        width: 100%;
                        margin-top: 20px;
                        .headline{
                            width: 100%;
                            height: 30px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            .se{
                                width: 10%;
                                height: 100%;
                                display: flex;
                                align-items: center;
                            }
                            .rto{
                                justify-content: flex-end;
                                span{
                                    &.iconfont{
                                        font-size: 18px;
                                    }
                                }
                            }
                            .tr{
                                width: 25%;
                                span{
                                    font-size: 14px;
                                    font-weight: 600;
                                }
                            }
                        }
                    }
                }
                .hop{
                    margin-top: 10px;
                }
                .hist-listss{
                    width: 100%;
                    margin-top: 5px;
                    display: flex;
                    flex-wrap: wrap;
                    span{
                        &.tp{
                            // display: block;
                            margin: 5px;
                            padding: 5px;
                            border-radius: 6px;
                            font-size: 12px;
                            background-color: #f9f9f9;
                        }
                    }
                }
                .hop-listss{
                    width: 100%;
                    margin-top: 5px;
                    display: flex;
                    flex-wrap: wrap;
                    span{
                        &.tp{
                            // display: block;
                            margin: 5px;
                            padding: 5px;
                            border-radius: 6px;
                            font-size: 12px;
                            background-color: #f9f9f9;
                        }
                    }
                }
                .relisstos{
                    width: 100%;
                    margin-top: 50px;
                    .itemto{
                        width: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-wrap: wrap;
                        .items{
                            width: 100%;
                            height: 100px;
                            margin-top: 10px;
                            margin-bottom: 10px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            .img{
                                width: 50%;
                                height: 100%;
                                border-radius: 8px;
                                overflow: hidden;
                                img{
                                    width: 100%;
                                }
                            }
                            .right{
                                width: 50%;
                                height: 100%;
                                padding: 10px;
                                position: relative;
                                .tile{
                                    width: 100%;
                                    max-height: 52px;
                                    overflow: hidden;
                                    .recipe-name {
                                        font-size: 16px;
                                        line-height: 26px;
                                        color: #333;
                                        font-weight: bold;
                                    }
                                    .text-clamp {
                                        word-break: break-all;
                                        text-overflow: ellipsis;
                                        display: -webkit-box;
                                        -webkit-line-clamp: 2;
                                        -webkit-box-orient: vertical;
                                        overflow: hidden;
                                    }
                                    .recipe-cai {
                                        font-size: 12px;
                                        line-height: 26px;
                                        color: #9293AE;
                                    }
                                    .text-lips {
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        overflow: hidden;
                                    }
                                }
                                .recipe-auth {
                                    font-size: 10px;
                                    height: 15px;
                                    overflow: hidden;
                                    line-height: 15px;
                                    color: #8c8c8c;
                                }
                                .recipe-other{
                                    position: absolute;
                                    bottom: 10px;
                                    color: #8c8c8c;
                                    span{
                                        font-size: 10px;
                                    }
                                }
                            }
                        }
                    }
                }

            }
            .seektosgoto{
                .headline{
                    width: 100%;
                    height: 30px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .se{
                        width: 10%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                    }
                    .rto{
                        justify-content: flex-end;
                        span{
                            &.iconfont{
                                font-size: 18px;
                            }
                        }
                    }
                    .tr{
                        width: 25%;
                        span{
                            font-size: 14px;
                            font-weight: 600;
                        }
                    }
                }
                 .hop{
                    margin-top: 0px;
                }
                 .relisstos{
                    width: 100%;
                    margin-top: 0px;
                    .itemto{
                        width: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-wrap: wrap;
                        .items{
                            width: 100%;
                            height: 100px;
                            margin-top: 10px;
                            margin-bottom: 10px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            .img{
                                width: 50%;
                                height: 100%;
                                border-radius: 8px;
                                overflow: hidden;
                                img{
                                    width: 100%;
                                    margin: auto;
                                }
                            }
                            .right{
                                width: 50%;
                                height: 100%;
                                padding: 10px;
                                position: relative;
                                .tile{
                                    width: 100%;
                                    height: 52px;
                                    overflow: hidden;
                                    .recipe-name {
                                        font-size: 16px;
                                        line-height: 26px;
                                        color: #333;
                                        font-weight: bold;
                                    }
                                    .text-clamp {
                                        word-break: break-all;
                                        text-overflow: ellipsis;
                                        display: -webkit-box;
                                        -webkit-line-clamp: 2;
                                        -webkit-box-orient: vertical;
                                        overflow: hidden;
                                    }
                                    .recipe-cai {
                                        font-size: 12px;
                                        line-height: 26px;
                                        color: #9293AE;
                                    }
                                    .text-lips {
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        overflow: hidden;
                                    }
                                }
                                .recipe-auth {
                                    font-size: 10px;
                                    height: 15px;
                                    overflow: hidden;
                                    line-height: 15px;
                                    color: #8c8c8c;
                                }
                                .recipe-other{
                                    position: absolute;
                                    bottom: 10px;
                                    color: #8c8c8c;
                                    span{
                                        font-size: 10px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
     .jijiaaiaai{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -12px;
            margin-top: -12px;
            z-index: 99;
            
        }
</style>